
<template>
  <div class="main-div">
    <Row >
      <Col span="4">
        <Tree :data="categoryData" expand="true" default-expand-all="true" @on-select-change="refreshTask"></Tree>
      </Col>
      <Col span="20">
        <Card  dis-hover class="task-card">
          <div class="app-container">


            <el-row class="margin:30px;">
              <el-col>
                <el-table
                  :data="tableData"
                  size="mini"
                  style="width: 100%"
                  :height="tableHeight"
                  border
                >
                  <el-table-column
                    prop="name"
                    label="名称"
                    width='180'
                    show-overflow-tooltip
                  >
                  </el-table-column>

                  <el-table-column
                    fixed
                    prop="description"
                    label="描述"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                  <el-table-column
                    prop="key"
                    label="key"
                    show-overflow-tooltip
                  >
                  </el-table-column>

                  <el-table-column
                    prop="version"
                    label="版本"
                    show-overflow-tooltip
                  >

                  </el-table-column>
                  <el-table-column
                    prop="categoryName"
                    label="分类"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                  <el-table-column
                    fixed="right"
                    label="操作"
                  >
                    <template slot-scope="scope">
                        <el-popconfirm
                          title="您确定要删除吗？"
                          confirmButtonText='确定'
                          cancelButtonText='取消'
                          @onConfirm="handleClick(scope.row.id)"
                        >
                          <el-button slot="reference"  size='mini' type='text'  icon="el-icon-delete"   ></el-button>
                        </el-popconfirm>


                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
            </el-row>
          </div>
        </Card>
        <Modal :mask-closable="false"  v-model="delMsgModal" width="360"  :transfer="false">
          <p slot="header" style="color:#f60;">
            <Icon type="ios-information-circle"></Icon>
            <span>删除操作</span>
          </p>
          <div style="text-align:center">
            确定要删除吗？
          </div>
          <div slot="footer">

            <Button type="error" size="large" long :loading="modal_loading" @click="delCacheConfirm">删除</Button>
          </div>
        </Modal>
      </Col>


    </Row>
    <Row>
      <Col span="24">
      <footer></footer>
      </Col>
    </Row>
  </div>


</template>

<script>
  import {getMonitor,getBpmnModelCategory,delMonitorById} from "@/api/analy";
  import Footer from '../../../common/footer';

  export default {
    name: 'Task',
    components:{
      Footer
    },

    data() {
      return {
        tableData: [],
        tableHeight: 450,
        queryDate:[],
        delMsgModal:false,
        delMsgModalId:"",
        total: 0,
        chartVisible: false,
        forbiddenSwitch: false,
        modal_loading: false,
        chartData: {},
        sellerId: 0,
        shopName: [],
        queryForm: {
          name: "",
          createTime: "",
          page: 0,
          limit: 1000,
          whereSql: "",
          type: ""
        },
        categoryData: [
        ]
      }
    },
    mount() {
      this.getData()
      this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop
    },
    created() {
      this.getData()
    },
    methods: {
      delCacheConfirm:function(){
        var ids = [];
        ids.push(this.delMsgModalId);
        delMonitorById(ids).then((response) => {
          var code = response.code
          if (code==0){
            this.$Message.success("删除成功");
            this.delMsgModal=false
            this.getData()
          }else{
            this.$message({"duration":'800',message:response.msg,type:'warning',customClass:'zZindex',"duration":'800'});
          }



        })
      },

      queryFormCreateTime:function(e){
        this.queryForm.createTime=e;
      },
      refreshTask:function(data){
        if (data[0].parentId=='-1'){
          this.queryForm.type=""
        } else{
          this.queryForm.type=data[0].typeKey;

        }
        getMonitor(this.queryForm).then((response) => {
          this.tableData = response.data
          this.total = parseInt(response.count);

        })

      },
      getData: function () {
        getBpmnModelCategory().then((response) => {
          this.categoryData = response.data

        })
        getMonitor(this.queryForm).then((response) => {
          this.tableData = response.data
          this.total = parseInt(response.count);

        })
      },
      handleCurrentChange(val) {
        this.queryForm.page = val
        this.getData()
      },
      handleClick(val) {
        //加载数据
        this.delMsgModalId=val;
        this.delCacheConfirm();
        //this.delMsgModal=true
      },
      search() {
        this.queryForm.page = 0
        this.queryMethod()
      },
      reset() {
        this.queryForm.name = "";
        this.queryForm.createTime = "";
        this.queryForm.whereSql = "";
        this.queryDate = [];
        this.getData()
      }

    }

  }

</script>
<style lang="scss">
.task-card{
  margin-top: 10px;
}

</style>
